import { RedoOutlined, UserOutlined } from '@ant-design/icons';
import { useUpdateEffect } from 'ahooks';
import { Avatar, Card, Col, Divider, Progress, Row, Statistic } from 'antd';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { useSnapshot } from 'valtio';

import useDarkMode from '@/hooks/useDarkMode';
import useScreenSize from '@/hooks/useScreenSize';
import { userProxy } from '@/store/userStore';
import { vulnerableProxy } from '@/store/vulnerableStore';
import { resetVulnerable } from '@/store/vulnerableStore';
import messageBox from '@/utils/messageBox';

import UserActions from './components/UserActions';

const { Meta } = Card;

const User = () => {
  const { t } = useTranslation();
  const { currentDarkMode } = useDarkMode();
  const { isMobile } = useScreenSize();
  const navigate = useNavigate();
  const userSnap = useSnapshot(userProxy);
  const vulnerableSnap = useSnapshot(vulnerableProxy);

  useUpdateEffect(() => {
    if (!isMobile) {
      navigate('/', { replace: true });
    }
  }, [isMobile]);

  return (
    <Card
      className="mt-5 mb-5"
      bordered={currentDarkMode === 'light'}
      actions={UserActions()}
      cover={<img src={userSnap?.background} />}
    >
      <Meta
        avatar={
          <Avatar
            className="inline-flex justify-center items-center"
            shape="square"
            icon={<UserOutlined />}
            src={userSnap.avatar}
          />
        }
        title={userSnap.username}
      />
      <Divider />
      <Row className="mt-6" gutter={16}>
        <Col span={12}>
          <Statistic
            title={
              <>
                Passed
                <RedoOutlined
                  className="ml-2"
                  onClick={() => {
                    resetVulnerable();
                    messageBox.success({ content: t('vulnerableReset') });
                  }}
                />
              </>
            }
            value={vulnerableSnap.passed}
            suffix="/ 15"
          />
        </Col>
        <Col span={24}>
          <Progress
            className="mt-3"
            percent={Math.floor((vulnerableSnap.passed / 15) * 100)}
            size="small"
            status="active"
          />
        </Col>
      </Row>
    </Card>
  );
};

export default User;
